<script setup lang="ts">
import { toast, showConfirm } from '@/utils/common'
import useUserStore from '@/store/modules/user'
import CustomNavBar from '@/components/custom-nav-bar/custom-nav-bar.vue'
import BackNavBar from '@/components/back-nav-bar/back-nav-bar.vue'
const userStore = useUserStore()
type ConfirmType = {
  cancel: boolean
  confirm: boolean
}
// 切换账号函数
const switchAccount = () => {
  // 实现切换账号逻辑
  showConfirm('确定要切换账号吗？').then((res: ConfirmType) => {
    if (res.confirm) {
      // 切换账号逻辑
      userStore.logOut().then(() => {
        uni.switchTab({ url: '/pages/index/index' })
      })
      toast('切换账号成功')
    } else if (res.cancel) {
      // 取消切换账号
      toast('取消切换账号')
    }
  })
}

// 退出登录函数
const logout = () => {
  // 实现退出登录逻辑
  showConfirm('确定要退出登录吗？').then((res: ConfirmType) => {
    if (res.confirm) {
      userStore.logOut().then(() => {
        uni.switchTab({ url: '/pages/index/index' })
      })
    } else if (res.cancel) {
      toast('取消退出登录')
    }
  })
}
</script>
<template>
  <view class="settings-container">
    <!-- #ifndef MP-TOUTIAO -->
    <back-nav-bar title="设置"></back-nav-bar>
    <!-- #endif -->
    <!-- 设置项列表 -->
    <view class="settings-list">
      <uni-list>
        <uni-list-item title="账号与安全" link to="#" />
        <uni-list-item title="修改账号信息" link to="#" />
        <uni-list-item title="关于我们" link to="/pages/setting/about" />
        <uni-list-item title="帮助与反馈" link to="/pages/setting/help" />
      </uni-list>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn" @click="switchAccount">切换账号</button>
      <button class="action-btn" @click="logout">退出登录</button>
    </view>
  </view>
</template>
<style scoped lang="scss">
.settings-container {
  background-color: #f5f5f5;
  padding: 20rpx;

  .header {
    background-color: #fff;
    padding: 40rpx;
    text-align: center;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);

    .username {
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
    }
  }

  .settings-list {
    background-color: #fff;
    border-radius: 8rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 20rpx; // 添加与按钮之间的间距

    .uni-list-item {
      &--disabled {
        opacity: 0.6;
      }
    }
  }

  .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10rpx; // 控制按钮之间的间距

    .action-btn {
      width: 100%;
      padding: 20rpx;
      background-color: #007aff;
      color: #fff;
      font-size: 30rpx;
      border: none;
      border-radius: 8rpx;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: darken(#007aff, 10%);
      }

      &:active {
        background-color: darken(#007aff, 20%);
      }
    }
  }
}
</style>
